<template>
  <!-- <transition name="slide"> -->
  <div
    class="e-charstyle"
    :class="{ shifted: leftShifted, visible: isVisible }"
  >
    <div class="title-item">人口</div>
    <div ref="echartsContainer" class="e-ch-item"></div>
    <div class="title-item">人口性别占比</div>
    <div ref="echarts1Container" class="e-ch-item"></div>
  </div>
  <!-- </transition> -->
</template>

<script>
import * as echarts from "echarts";
import { ref, onMounted, watch } from "vue";
export default {
  props: ["leftShifted"],
  setup(props) {
    const echartsContainer = ref(null);
    const echarts1Container = ref(null);
    const isVisible = ref(true);
    // 监听左移状态的变化，根据变化来控制显示和隐藏
    watch(
      () => props.leftShifted,
      (newVal) => {
        console.log(newVal);
        isVisible.value = !newVal; // 设置 isVisible 的值与 leftShifted 相反
      }
    );
    onMounted(() => {
      // 在组件挂载后执行的逻辑
      // 使用 echartsContainer.value 获取容器元素

      // 基于准备好的容器，初始化 ECharts 实例
      const data = ["1011", "1012", "1013", "1014", "1015", "1016", "1017"];
      const chart = echarts.init(echartsContainer.value);
      chart.resize({
        width: 300,
        height: 200,
      });
      // 构建图表配置
      const options = {
        grid: {
          top: "10%", // 通过百分比设置图表与容器顶部的间距
          left: "20%",
        },
        // 在这里配置图表的数据和样式
        xAxis: {
          type: "category",
          name: "年",
          color: "white",
          data: data,
          axisLabel: {
            interval: 0, // 设置刻度标签全部显示
            fontSize: 9, // 设置 x 轴刻度标签的字体大小
            color: "white",
          },
          axisTick: {
            interval: 0, // 设置刻度之间的间隔数量
          },
        },
        yAxis: {
          type: "value",
          left: "20%",
          axisLabel: {
            interval: 0, // 设置刻度标签全部显示
            fontSize: 9, // 设置 x 轴刻度标签的字体大小
            color: "white",
          },
          axisLine: {
            show: true, // 显示 y 轴实线
          },
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表
      chart.setOption(options);

      const data1 = [];
      const chart1 = echarts.init(echarts1Container.value);
      chart1.resize({
        width: 300,
        height: 200,
      });
      // 构建图表配置
      const option1 = {
        title: {
          subtext: "男女占比数据",
          left: "center",
        },
        series: [
          {
            type: "pie",
            radius: "50%",
            data: [
              { value: 1048, name: "男" },
              { value: 735, name: "女" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表
      chart1.setOption(option1);
    });
    return {
      echartsContainer,
      echarts1Container,
      isVisible,
    };
  },
};
</script>

<style>
.e-charstyle {
  position: absolute;
  top: 16%;
  left: 13.5%;
  transform: translate(-50%);
  width: 25%;
  background-color: #110458e3;
  height: 31rem;
  /* border:2px solid rgb(9, 170, 245);*/
  box-shadow: 0px 0 10px rgb(9, 170, 245);
  transition: transform 0.5s ease-in-out;
}
.e-ch-item {
  width: 100%;
  height: 12rem;
}
.title-item {
  font-size: 0.8rem;
  background-color: #110458e3;
  text-align: left;
  padding: 0.4rem 0.6rem;
}
</style>